<template>
	<div id="container">
		<div id="changdepUpdate_content">
			<el-form>
				<el-form-item size="large">
					<h1>部门调动员工报表信息更新</h1>
				</el-form-item>
			</el-form>
			<el-form :label-position="labelPosition" 
						label-width="100px" 
						:model="formLabelAlign" 
						style="max-width: 500px">
				<el-form-item label="原部门名称:">
					<el-input placeholder="请输入原部门名称..." 
								v-model="changdepupdate.old_dep_name"></el-input>
				</el-form-item>
				
				<el-form-item label="新部门名称:">
					<el-input placeholder="请输入新岗位名称..." 
								v-model="changdepupdate.new_dep_name"></el-input>
				</el-form-item>
				
				<el-form-item label="姓名:">
					<el-input placeholder="请输入姓名..." 
								v-model="changdepupdate.staff_name"></el-input>
				</el-form-item>
				
				<el-form-item label="性别:">
					<el-input placeholder="请输入性别..." 
								v-model="changdepupdate.staff_sex"></el-input>
				</el-form-item>
				
				<el-form-item label="调动日期:">
					<el-date-picker type="date" 
									value-format="YYYY-MM-DD" 
									v-model="changdepupdate.dep_chang_date"></el-date-picker>
				</el-form-item>
				
				<el-form-item label="调动原因:">
					<el-input maxlength="200" 
								placeholder="请输入..." 
								show-word-limit 
								type="textarea"
								v-model="changdepupdate.dep_chang_reason"></el-input>
				</el-form-item>
				
				<el-form-item>
					<div class="btn">
						<el-button type="primary" @click="doBack()">返回</el-button>
						<el-button type="primary" @click="doUpdate()">更新</el-button>
					</div>
						
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name:'ChangDepUpdate',
		data(){
			return{
				changdepupdate:{
					old_dep_name:'',
					new_dep_name:'',
					staff_name:'',
					staff_sex:'',
					dep_chang_date:'',
					dep_chang_reason:''
				}
			}
		},
		created() {
			let str = sessionStorage.getItem("ChangDep");
			if (str == null || str == '') {
				this.$router.push("/ChangDep");
			} else {
				this.changdepupdate = JSON.parse(str);
				console.log(this.changdepupdate);
			}
		},
		methods:{
			doBack(){
				this.$router.push("/ChangDep");
			},
			doUpdate(){
				let str = JSON.stringify(this.changdepupdate);
				this.$axios.post("http://localhost:8088/eStaff/changDep/doUpdate",this.changdepupdate)
				.then(rst=>{
					if(rst.data.code==200){
						this.$alert("更新成功","提示");
					}else{
						this.$alert("更新失败","提示");
					}
				}).catch(err=>{
					console.log(err);
				})
			}
		}
	}
	import { reactive, ref } from 'vue'
	const textarea = ref('')
	const labelPosition = ref('right')
	const formLabelAlign = reactive({
		name: '',
		region: '',
		type: '',
	})
</script>

<style scoped>
	#container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#changdepUpdate_content {
		width: 600px;
		height: 550px;
		border-radius: 10px;
		padding: 20px;
		box-sizing: border-box;
		box-shadow: 0px 0px 10px gray;
	}
	
	#changdepUpdate_content h1 {
		text-align: center;
		width: 100%;
		height: 50px;
	}
	
	#changdepUpdate_content .btn {
		width: 100%;
		height: 40px;
		text-align: right;
	}
</style>
